<template>
	<view class="balance">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		<!-- #endif -->
		<!-- end -->

		<view class="xian-gray16"></view>
		<!-- <canvas v-show="!panduan" @click="see()" canvas-id="qrcode" style="width: 300px;height: 300px;opacity: 0;" /> -->
		<view class="nav">
			<view class="top">
				<image v-if="form.portrait" :src="form.portrait" mode="widthFix" class="top-img"></image>
				<image v-else src="/static/images/personal.png" mode="widthFix" class="top-img"></image>
				<view class="card-body">
					<view class="name">{{form.nickname||'-'}}</view>
					<view class="sex">{{form.sex||'-'}}</view>
				</view>
				<view class="top-icon" v-show="val" @click="see()">
				    <tki-qrcode
				    ref="qrcode"
					:cid="cid"
				    :val="val"
				    :size="size"
					:background="background"
					:foreground="foreground"
					:pdground="pdground"
					:lv="lv"
					:onval="onval"
					:loadMake="loadMake"
					:show="show"
					@result="qrR()"
				     />
				</view>
				<!-- <image @click="see"  v-show="image" :src="image" mode="widthFix" class="top-icon" style="border: 1px solid;"></image> -->
				<!-- <canvas @click="see()" canvas-id="qrcode" style="width: 70px;height: 70px;" /> -->
			</view>
			<view class="title">
				团队成员
			</view>
			<mescroll-body top="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			 :up="upOption" :down="downOption">
				<view v-for="(item, index) in goods" class="card">
					<view class="card-index">{{index + 1}}</view>
					<image v-if="item.portrait" :src="item.portrait" mode="widthFix" class="card-img"></image>
					<image v-else src="/static/images/personal.png" mode="widthFix" class="card-img"></image>
					<view class="card-body">
						<view class="text1">{{item.nickname}}</view>
						<view class="text2">{{item.sex}}</view>
					</view>
				</view>
			</mescroll-body>
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
import app from "@/App.vue"
import tkiQrcode from "@/pageageA/components/tki-qrcode/tki-qrcode.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [MescrollMixin],
		components: {
			PublicHeader,
			MescrollBody,
			tkiQrcode
		},
		computed: mapState(['hasLogin', 'uerInfo']),
		data() {
			return {
				title: '我的团队',
				panduan: false,
				image: '',
				dark: true,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true,
					textNoMore: '没有更多数据',
					page: {
					  num : 0,
					  size : 10,
					  time : null
					}
				},
				id: '',
				sid: '',
				page: 1,
				pages: 1,
				page1: 1,
				pages1: 1,
				size: 10,
				table: [],
				goods: [],
				form: {
					portrait: '',
					nickname: '',
					sex: ''
				},
				list: [{
					portrait: '',
					nickname: '项目1',
					sex: '女'
				}, {
					portrait: '',
					nickname: '项目2',
					sex: '女'
				}, {
					portrait: '',
					nickname: '项目3',
					sex: '女'
				}],
				val:"",
				size:140,
				background:"#ffffff",
				foreground:"#000000",
				pdground:"#000000",
				loadMake:true,
				onval:true,
				lv:3,
				show:true,
				cid:'qrcode',
				code:''
			}
		},
		onLoad(option){
			var _this = this
			let url = 'https://www.beedao.tech/?sid=' + this.uerInfo.userId
			_this.val = url;
			// this.make()
			let str = ''
			if (app.globalData.query.q) {
				str = decodeURIComponent(app.globalData.query.q).split('=')[1]
			}
			if (option && option.sid) {
				_this.sid = option.sid
			} else if (str) {
				_this.sid = str
			}
			console.log('参数：')
			console.log('str:',str)
			console.log('option:',option)
			console.log('sid:',_this.sid)
			if (_this.sid) {
				uni.setStorage({ //将订单信息保存在本地
					key: 'parentId',
					data: _this.sid
				})
				app.globalData.query.q = ''
			}
			if (_this.sid&&_this.uerInfo.userId) {
				console.log('取消前:',app.globalData.query.q)
				app.globalData.query.q = ''
				console.log('取消后:',app.globalData.query.q)
			}
			if (_this.uerInfo.userId) {
				_this.$http.get('/personal/center/getuser/'+this.uerInfo.userId).
				then(function (response) {
					if(response.msg == '登录异常'){
						_this.logout()
					}else{
						_this.form = response.data
					}
				}).catch(function (error) {
					console.log(error);
				});	
				setTimeout(function() {
					_this.goods = []
					_this.mescroll.resetUpScroll()
				}, 10);
			} else {
				_this.logout()
			}
		},
		methods: {
			...mapMutations(['logout']),
			pay(item) {
				uni.navigateTo({
					url: '/pageageA/pages/balance/addmoney?type=活动&activityId=' + item.id + '&money=' + item.recharge
				})
			},
			qrR(res) {
				var that = this
				that.code = uni.getStorageSync('code');
			},
			see() {
				let images = [this.code]
				uni.previewImage({
					urls: images,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//下拉刷新的回调
			downCallback() {
				console.log('下拉')
				var _this = this
				_this.goods = []
				_this.mescroll.resetUpScroll()

			},
			//上拉加载的回调
			upCallback(page) {
				console.log('上拉')
				var _this = this
				if (!this.uerInfo.userId) {
					uni.navigateTo({
						url: '/pages/register/login'
					})
					return
				}
				_this.$http
					.get('/team/users/' + page.num + '/' + page.size,{
						userId:_this.uerInfo.userId
					})
					.then(function(response) {
						console.log('查询:',response)
						_this.mescroll.endBySize(response.data.list.length, response.data.total)
						//设置列表数据
						_this.goods=_this.goods.concat(response.data.list);
						_this.nolist = false
						
					})
					.catch(function(error) {
						console.log(error);
						_this.mescroll.endErr();
					});
				}
		}
	}
</script>

<style scoped lang="scss">
page {
	/* background-color: #F9FAFB; */
}
.title{
	width: 100%;
	height: 90rpx;
	margin-left: 30rpx;
	display: flex;
	align-items: center;
	
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 45rpx;
	letter-spacing: 1rpx;
}
.top{
	width: 690rpx;
	margin-left: 30rpx;
	margin-bottom: 20rpx;
	margin-top: 24rpx;
	height: 178rpx;
	background: $uni-color1;
	box-shadow: 0px 7rpx 26rpx 0px rgba($uni-color1, 0.45);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
}
.top-img{
	width: 118rpx;
	height: 118rpx !important;
	box-shadow: 0px 7rpx 26rpx 0px rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	margin-left: 30rpx;
	background-color: #FFFFFF;
}
.top-icon{
	width: 140rpx;
	height: 140rpx !important;
	box-shadow: 0px 7rpx 26rpx 0px rgba(0, 0, 0, 0.1);
	// background-color: #FFFFFF;
}
.name{
	height: 45rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 45rpx;
	letter-spacing: 3rpx;
}
.sex{
	height: 37rpx;
	font-size: 26rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 37rpx;
	letter-spacing: 2rpx;
}
.card{
	width: 690rpx;
	margin-left: 30rpx;
	margin-bottom: 20rpx;
	height: 144rpx;
	background: #FFFFFF;
	box-shadow: 0px 6px 28px 0px rgba(0, 0, 0, 0.06);
	border-radius: 8rpx;
	display: flex;
	align-items: center;
}
.card-index{
	margin: 0 34rpx 0 41rpx;
	width: 14rpx;
	height: 45rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 45rpx;
}
.card-img{
	width: 92rpx;
	height: 92rpx;
	box-shadow: 0px 7rpx 26rpx 0px rgba(0, 0, 0, 0.1);
	border-radius: 50%;
}
.card-body{
	margin-left: 20rpx;
	width: 360rpx;
}
.text1{
	height: 45rpx;
	font-size: 32rpx;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #333333;
	line-height: 45rpx;
}
.text2{
	height: 30rpx;
	font-size: 22rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 30rpx;
}
</style>
